---
import type { MarkdownHeading } from "astro";
import Categories from "./Categories.astro";
import MusicPlayer from "./MusicPlayer.astro";
import { getDefaultConfig, isEnabled } from "./MusicPlayerConfig.astro";
import Profile from "./Profile.astro";
import Tag from "./Tags.astro";

interface Props {
	class?: string;
	headings?: MarkdownHeading[];
	currentPath?: string;
}

const className = Astro.props.class;
const currentPath = Astro.props.currentPath;

// 获取音乐播放器配置
const musicConfig = getDefaultConfig();
const showMusicPlayer = isEnabled(musicConfig);
---
<div id="sidebar" class:list={[className, "w-full"]}>
    <div class="flex flex-col w-full gap-4 mb-4">
        <Profile></Profile>
    </div>
    
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
        <Categories class="onload-animation" style="animation-delay: 150ms" currentPath={currentPath}></Categories>
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
        <!-- 音乐播放器 - 仅在启用时显示 -->
        {showMusicPlayer && (
                <MusicPlayer class="onload-animation" style="animation-delay: 250ms"
                        playlist={musicConfig.playlist}
                        autoplay={musicConfig.autoplay}
                        position={musicConfig.position}
                />
        )}
    </div>
</div>
